<template>
  <div ref="box" id="box"></div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      // myChart: null,
    };
  },
  props: ["simpleData"],
  mounted() {
    console.log(this.simpleData,333)
    var myChart = echarts.init(this.$refs.box);
    myChart.setOption({
      // 01-组件图例，控制某个系列的数据是否显示
      legend: {
        // 图例的数据数组
        data: [
          {
            name: "饼图",
            textStyle: {
              color: "red",
            },
          },
          "销量",
          "价格",
        ],
      },
      // 02-工具箱
      toolbox: {
        show: true,
        // 工具箱的各项配置
        feature: {
          // 图形缩放功能
          dataZoom: {
            yAxisIndex: "none",
          },
          // 数据窗口的功能
          dataView: { readOnly: false },
          // 图形类型切换的功能
          magicType: {
            type: ["line", "bar"],
          },
          // 重置功能
          restore: {},
          // 图表保存为图片功能
          saveAsImage: {},
        },
      },
      // 03-鼠标滑动显示
      tooltip:{},
      // 04-横轴显示
      xAxis:{
        data:this.simpleData.map((item)=>item.x)
      },
      // 05-纵轴数据
      yAxis:{},
      // 各种类型
      series: [
        {
          name:'饼图',
          type: "pie",
          radius: [50, 250],    //内半径，外半径
          center: ["50%", "50%"],  //圆心坐标
          // 是否展示为南丁格尔图
          roseType: "area",//所有扇区圆心角相同，仅通过半径展现数据大小
          itemStyle: {
            borderRadius: 8,
          },
          data: this.simpleData.map((item,index)=>{
            return {value:item.val,name:'rose'+index}
          }),
        },

        {
          name:'销量',
          type:'line',
          data:this.simpleData.map((item)=>item.val)
        },

        {
          name:'价格',
          type:'bar',
          data:[50,90,80,75,76,96,84]
        }
      ]
    })
  }
}
</script>

<style scoped lang='scss'>
#box {
  width: 600px;
  height: 600px;
}
</style>